<script setup lang="jsx">
import { ElDivider } from 'element-plus'
import { ref, h, useAttrs } from 'vue';
import { useRouter } from "vue-router"

const router = useRouter()
const attrs = useAttrs();
const size = ref(10)
const spacer = h(ElDivider, { direction: 'vertical' })
// const emits = defineEmits(['cancel', 'confirm']);

const onCancel = () => {
  if (typeof attrs['cancel'] === 'function') {
    attrs['cancel']();
    return;
  } else {
    router.back()
  }
}
const onConfirm = () => {
  if (typeof attrs['confirm'] === 'function') {
    attrs['confirm']();
  }
}
</script>

<template>
  <div class="bottom-button-wrapper">
    <el-space :size="size" :spacer="spacer">
      <el-button @click="onCancel">返回</el-button>
      <el-button @click="onConfirm" type="primary">确定</el-button>
    </el-space>
  </div>
</template>

<style scoped>
  .bottom-button-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--el-color-dark-bg);
    z-index: 1;
  }
</style>
